<template>
  <div>
    <Card style="height: 240px; padding: 12px 12px 0px">
      <div class="head-title">基本信息</div>
      <div class="detail-body">
        <div class="ant-col-md-6">
          <div class="info">
            <div class="head-info">
              <Avatar size="large" :src="memberInfo.face?memberInfo.face:''" />
              <div>
                <div
                  class="name"
                  v-if="memberInfo.username && memberInfo.username.length > 15"
                >
                  {{ memberInfo.username.slice(0, 15) }}...
                </div>
                <div class="name" v-else>
                  {{ memberInfo.username }}
                </div>
                <div class="phone">
                  {{ memberInfo.mobile }}
                </div>
                <div class="phone">
                  {{ memberInfo.gradeIdName }}
                </div>
              </div>
            </div>
            <div class="bottom-info">
              <p>上次登录 {{ memberInfo.lastLoginDate }}&nbsp;</p>
              <!-- <p>
                <i-switch
                  size="large"
                  v-model="memberInfo.disabled"
                  :true-value="true"
                  :false-value="false"
                  @on-change="memberStatusChange"
                >
                  <span slot="open">启用</span>
                  <span slot="close">禁用</span>
                </i-switch>
              </p> -->
            </div>
          </div>
        </div>
        <div class="ant-col-md-6">
          <p class="item">
            <span class="label">推广人手机号：</span>
            <span class="info">{{ memberInfo.extensionMobile }}</span>
          </p>
          <p class="item">
            <span class="label">注册时间：</span>
            <span class="info">{{ memberInfo.createTime }}</span>
          </p>
          <p class="item">
            <span class="label">地点：</span>
            <span class="info">{{ memberInfo.locationName?memberInfo.locationName:0 }}</span>
          </p>
            <p class="item">
              <span class="label">充值钱包余额：</span>
              <span class="info">{{ memberInfo.rechargeMoney?memberInfo.rechargeMoney:0 }}</span>
            </p>
            <p class="item">
              <span class="label">推广会员费钱包余额：</span>
              <span class="info">{{ memberInfo.promoteHyMoney?memberInfo.promoteHyMoney:0 }}</span>
            </p>
            <p class="item">
              <span class="label">推广服务费钱包余额：</span>
              <span class="info">{{ memberInfo.promoteFwMoney?memberInfo.promoteFwMoney:0 }}</span>
            </p>
        </div>
        <div class="ant-col-md-6 detailTable">
          <Table
            highlight-row
            ref="currentRowTable"
            :columns="detailColums"
            :data="memberInfo.detailTableArr"
          ></Table>
        </div>
      </div>
    </Card>

    <Card class="mt_10">
      <Tabs value="order" @on-click="memberInfoChange" name="firstBox">
        <TabPane label="推广C端会员" name="order" tab="firstBox">
          <tuiguang :memberId="this.$route.query.id" ref="tuiguangC"></tuiguang>
        </TabPane>
        <TabPane label="推广焕商会员" name="huanshang" tab="firstBox">
          <huanshang :memberId="this.$route.query.id" :regionId="this.$route.query.regionId" ref="huanshang"></huanshang>
        </TabPane>
        <TabPane label="推广天使会员" name="tianshi" tab="firstBox">
          <tianshi :memberId="this.$route.query.id" ref="tianshi"></tianshi>
        </TabPane>
        <TabPane label="推广事业会员" name="shiye" tab="firstBox">
          <shiye :memberId="this.$route.query.id" :regionId="this.$route.query.regionId" ref="shiye"></shiye>
        </TabPane>
        <TabPane label="充值钱包" name="receipt" tab="firstBox">
          <chongzhi :memberId="this.$route.query.id" ref="chongz"></chongzhi>
        </TabPane>hi
        <TabPane label="推广会员费钱包" name="tuiguangWallet" tab="firstBox">
          <tuiguangWallt :memberId="this.$route.query.id" walletType="PROMOTE_HY"  ref="tuiguangWallteHY"></tuiguangWallt>
        </TabPane>
        <TabPane label="推广服务费钱包" name="fuWu" tab="firstBox">
          <tuiguangWallt :memberId="this.$route.query.id" walletType="PROMOTE_FW" ref="tuiguangWallteFW"></tuiguangWallt>
        </TabPane>
        
      </Tabs>
    </Card>
  </div>
</template>

<script>
import region from "@/views/lili-components/region";
import * as API_Member from "@/api/member.js";
import ossManage from "@/views/sys/oss-manage/ossManage";
import liliMap from "@/views/my-components/map/index";
import * as RegExp from "@/libs/RegExp.js";
import * as API_Order from "@/api/order.js";
import tuiguang from "@/views/partner-manager/components/city-partner-detail-tabs/tuiguang";
import tuiguangWallt from "@/views/partner-manager/components/user-partner-detail-tabs/tuiguangWallt";
import chongzhi from '@/views/partner-manager/components/user-partner-detail-tabs/chongzhi'
import huanshang from "@/views/partner-manager/components/city-partner-detail-tabs/huanshang";
import tianshi from "@/views/partner-manager/components/city-partner-detail-tabs/tianshi";
import shiye from "@/views/partner-manager/components/city-partner-detail-tabs/shiye";
import fuWu from "@/views/partner-manager/components/city-partner-detail-tabs/fuWu";

export default {
  name: "city-partner-detail",
  components: {
    region,
    ossManage,
    liliMap,
    tuiguang,
    huanshang,
    tianshi,
    shiye,
    chongzhi,
    tuiguangWallt,
    fuWu
  },
  data() {
    return {
      id: "", //会员id
      loading: true, // 表单加载状态
      memberInfo: {}, //会员信息
      detailColums: [
        {
          title: "现金额",
          key: "price",
          align: "center",
        },
        {
          title: "对应焕贝额",
          key: "yiBei",
          align: "center",
        },
        {
          title: "支付时间",
          key: "payTime",
          align: "center",
        },
        {
          title: "生效起止时间",
          key: "beginTime",
          align: "center",
        },
      ], //会员信息头部端口费用标题
     
    };
  },
  methods: {
    init() {
      //查询会员信息
      this.getMemberInfo();
    },
    // 进入到店铺
    goStore(row) {
      console.log(row);
      // this.$router.push({
      //     name: "shop-detail",
      //     query: {
      //       id: row.id
      //     }
      //   });
    },
    
    //会员信息tab改变事件
    memberInfoChange(v) {
      if (v == "order") {
        this.$refs.tuiguangC.getOrderData();
      }
      if (v == "receipt") {
        if (this.$refs.chongzhi.$refs.tabsDefaultValue.activeKey == "shouru"){
          this.$refs.chongzhi.shouruData();
        }else{
          this.$refs.chongzhi.zhichu();
        }
      }
      if (v == "tuiguangWallet") {
        // 在此调取推广钱包接口
        if (this.$refs.tuiguangWallteHY.$refs.tabsDefaultValue.activeKey == "shouru"){
          this.$refs.tuiguangWallteHY.shouruData();
        }else{
          this.$refs.tuiguangWallteHY.zhichu();
        }
      }
      if (v == "fuWu") {
        // 在此调取推广钱包接口
        if (this.$refs.tuiguangWallteFW.$refs.tabsDefaultValue.activeKey == "shouru"){
          this.$refs.tuiguangWallteFW.shouruData();
        }else{
          this.$refs.tuiguangWallteFW.zhichu();
        }
      }
      if(v=='huanshang'){
        this.$refs.huanshang.getOrderData()
      }
      if(v=='shiye'){
        this.$refs.shiye.getOrderData()
      }
      if(v=="tianshi"){
        this.$refs.tianshi.getOrderData()
      }
    },
    //查询会员信息
    getMemberInfo() {
      let params = {
        id: this.id,
        state: "AGENT",
      };
      API_Member.getMemberInfoData(params).then((res) => {
        this.$set(this, "memberInfo", res.result);
        this.memberInfo.detailTableArr = [
          {
            price: res.result.price?res.result.price:0,
            yiBei: res.result.yiBei?res.result.yiBei:0,
            payTime: res.result.payTime?res.result.payTime:'-',
            beginTime: res.result.beginTime?res.result.beginTime:'-',
          },
        ];
      });
    },
    //会员状态改变事件
    memberStatusChange(v) {
      let params = {
        memberIds: [this.id],
        disabled: v,
      };
      API_Member.updateMemberStatus(params).then((res) => {});
    }
  },

  mounted() {
    this.id = this.$route.query.id;
    this.init();
  },
};
</script>
<style lang="scss" scoped>
@import "../user-partner-detail.scss";
.totleQuota {
  margin-left: auto;
  display: flex;
  align-items: center;
  p {
    padding: 0 15px;
    box-sizing: border-box;

    span {
      color: #ff5c58;
      padding-left: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.detailTable {
  width: 50% !important;
}
.Unbind {
  background: #f56c1d;
}
/deep/.ivu-tabs-bar {
  border: none !important;
}
.storeBtn {
  // width:30px;
  display: inline;
  padding: 8px 20px;
  box-sizing: border-box;
  border-radius: 6px;
  background: #f56c1d;
  color: #ffffff;
}
.walltMoneyNumBox {
  display: flex;
  align-items: center;
  p {
    margin-right: 20px;
  }
}
</style>
